import React, { PureComponent } from 'react';
import { Form, Modal, Input } from 'antd';

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
};

// const selectBefore = (
//   <Select defaultValue="Http://" style={{ width: 90 }}>
//     <Select.Option value="Http://">Http://</Select.Option>
//     <Select.Option value="Https://">Https://</Select.Option>
//   </Select>
// );

@Form.create()
export default class AdModal extends PureComponent {
  render() {
    const { onOk, onCancel, modalVisible, modalData } = this.props;
    const { form: { getFieldDecorator, validateFields, getFieldsValue } } = this.props;
    const handleOk = () => {
      validateFields((errors) => {
        if (errors) {
          return;
        }
        const data = modalData && modalData.id ? {
          ...getFieldsValue(),
          id: modalData.id,
        } : {
          ...getFieldsValue(),
        };
        onOk(data);
      });
    };
    return (
      <Modal
        title="新建广告主"
        visible={modalVisible}
        onOk={handleOk}
        onCancel={onCancel}
        destroyOnClose
      >
        <Form layout="horizontal">
          <Form.Item label="广告主名称" hasFeedback {...formItemLayout}>
            {getFieldDecorator('name', {
              initialValue: modalData ? modalData.name : '',
              rules: [
                {
                  required: true,
                },
              ],
            })(<Input />)}
          </Form.Item>
          <Form.Item label="广告主网站" hasFeedback {...formItemLayout}>
            {getFieldDecorator('adUrl', {
              initialValue: modalData ? modalData.adUrl : '',
            })(
              <Input />
            )}
          </Form.Item>
          <Form.Item label="联系方式" hasFeedback {...formItemLayout}>
            {getFieldDecorator('phone', {
              initialValue: modalData ? modalData.phone : '',
            })(<Input />)}
          </Form.Item>
        </Form>
      </Modal>
    );
  }
}
